<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, input, select, textarea {
            font-family: Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", sans-serif;
        }

        #wrap {
            height: 400px;
        }

    </style>


    <link href="../src/mdeditor.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="wrap">

</div>

<script type="text/plain" style="display: none" id="md_source">## 标题
# 一级标题</div>
## 二级标题</div>
### 三级标题</div>
#### 四级标题</div>
##### 五级标题</div>
###### 六级标题</div>
## 无序列表
- 1</div>
- 2
- 3
* 1
* 2
* 3
. 1
. 2
. 3
## 有序列表
1. 1</div>
2. 2
3. 3
### 引用
>1. a</div>
>2. b</div>
>33. c</div>
>段落
## 图片
![前端路迹](http://www.qinshenxue.com/static/img/logo.jpg)
## 链接
[前端路迹](http://www.qinshenxue.com/)
## 行内代码
行内代码展示：`npm install`
## 粗体
粗体展示：**粗体**
## 斜体
斜体展示: *斜体*
## 表格
|1|2|3|4|
|:--:|:--:|:--:|:--:|
|1|2|3|4|
|1|2|3|4|
## 代码块
``` css
.mdeditor {
    float: left;
    width: 50%;
    line-height: 1.5em;
    resize: none;
    outline: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
```
``` xml
<ul class="mdeditor-ol">
    <li>原创markdown编辑器，基于textarea，同步预览html，不依赖任何插件，使用简单。</li>
</ul>
```
``` javascript
var a=1,b=2; // 注释
function test(){
	return "原创markdown编辑器，基于textarea，同步预览html，不依赖任何插件，使用简单。";
}
```
## 内嵌页（自定义语法，私有语法）
$[200](about:blank)
</script>

<script src="../src/mdeditor.js"></script>
<script src="../src/mdeditor.grammer.iframe.js"></script>

<script>
    var editor = mdeditor({
        id: 'wrap',
        placeholder: '请输入markdown语法文本，右边同步预览html'
    });

    editor.setMarkdown(document.getElementById('md_source').innerHTML);
</script>
</body>
</html>